<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 由于IE8及以下浏览器不支持用css使用这些尚未支持的结构元素，所以还需要使用以下一些内容
        document.createElement("header");
        document.createElement("nav");
        // ......
    </script>
    <style>
        /*由于有些浏览器未对结构元素提供支持，所以对这些元素使用样式时，先转成其他结构*/
        article, aside, dialog, figure, footer, header, legend, nav, section, main {
            display: block;
        }
    </style>
</head>
<body>
<!--隐式编排: 不明确使用结构元素-->
<h1>网页级标题</h1>
<p>网页级正文</p>
<!--分析器根据h2等元素判断生成内容区块-->
<h2>section级内容区块</h2>
<p>section级区块正文</p>

<!--显式编排： 博客网页编排示例-->
<header>
    <h1>网页标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a> </li>
            <li><a href="#">帮助</a> </li>
        </ul>
    </nav>
</header>
<!--正文-->
<article>
    <header>
        <h2>文章标题</h2>
        <h3>文章子标题</h3>
    </header>
    <p>文章正文</p>
    <!--文章评论-->
    <section>
        <article>
            <h3>评论标题</h3>
            <p>评论内容</p>
        </article>
        <article>
            <h3>评论标题</h3>
            <p>评论内容</p>
        </article>
        <article>
            <h3>评论标题</h3>
            <p>评论内容</p>
        </article>
    </section>
</article>
<!--版权信息-->
<footer>
    <small>版权所有：大前端软件公司</small>
</footer>
</body>
</html>